<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8" />
    <title>优品-秒杀</title>
    <link rel="icon" href="/static/cart/img/favicon.ico" type="/image/x-icon" />
    <script type="text/javascript" src="/static/cart/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/cart/css/success.css" />
    <style type="text/css">
        #payTime {
            font: bold 20px '微软雅黑';
            color: red;
        }
    </style>
</head>

<body>
    <!--头部-->
    <div class="alert-info">
        <div class="hd_wrap_top">
            <ul class="hd_wrap_left">
                <li class="hd_home">
                    <a href="http://yomall.com">优品首页</a>
                </li>
            </ul>
            <ul class="hd_wrap_right">
                <li class="forel">
                    <a th:if="${session.loginUser==null}" href="http://auth.yomall.com/login.html">你好，请登录</a>
                    <a th:if="${session.loginUser!=null}">欢迎，[[${session.loginUser.nickname}]]</a>
                </li>
                <li class="spacer"></li>
                <li>
                    <a href="http://member.yomall.com/memberOrder.html">我的订单</a>
                </li>
            </ul>
        </div>
    </div>

    <div class="nav-tabs-justified">
        <div class="nav_wrap">
            <div class="nav_top">
                <div class="nav_top_one">
                    <a href="http://yomall.com"><img src="/static/cart/img/logo.png" /></a>
                </div>
                <div class="nav_top_two"><input type="text" /><button>搜索</button></div>
            </div>
        </div>
    </div>

    <div class="main">
        <div class="success-wrap">
            <div class="w" id="result">
                <div class="m succeed-box">
                    <div th:if="${orderSn!=null}" class="mc success-cont">
                        <h3 style="margin: 20px 0px">恭喜，秒杀成功，订单号：[[${orderSn}]]</h3>
                        <p>
                            <a th:href="'http://order.yomall.com/payOrder?orderSn='+${orderSn}" id="pay">
                                正在准备订单数据，请您耐心等待 <span id="payTime">10</span> 秒后进行支付！
                            </a>
                        </p>
                    </div>
                    <div th:if="${orderSn==null}" class="mc success-cont">
                        <h3 style="margin: 20px 0px">手气不佳，秒杀失败，下次再来！</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        // 倒计时跳转支付
        $(function () {
            let href = $('#pay').attr('href')
            $('#pay').removeAttr('href')
            $('#pay').attr('disabled', true)
            let orderSn = [[${orderSn}]]
            let count = 10
            let countdown = setInterval(CountDown, 1000)
            function CountDown() {
                $("#payTime").text(count)
                if (count == 0) {
                    clearInterval(countdown)
                    $('#pay').text('支付订单')
                    $('#pay').attr('href', href)
                    $('#pay').removeAttr('disabled')
                }
                count--;
            }
        });
    </script>
</body>

</html>